<div
  [class.devui-time-axis-item-horizontal]="direction === 'horizontal'"
  [class.devui-time-axis-item-vertical]="direction === 'vertical' && timePosition !== 'bottom'"
  [class.devui-time-axis-item-vertical-time-bottom]="direction === 'vertical' && timePosition === 'bottom'"
>
  <div
    *ngIf="timePosition !== 'bottom' && mode !== 'bottom' && mode !== 'right'"
    [class.devui-time-axis-item-data-horizontal-top]="direction === 'horizontal'"
    [class.devui-time-axis-item-data-vertical-left]="direction === 'vertical'"
  >
    <div *ngIf="time && (position === 'bottom' || position === 'right')">
      <div [class.devui-time-axis-item-horizontal-align-center]="position === 'bottom' && horizontalAlign === 'center'">{{ time }}</div>
    </div>
    <div
      *ngIf="position === 'top' || position === 'left'"
      [class.devui-time-axis-item-horizontal-align-center]="position === 'top' && horizontalAlign === 'center'"
    >
      <div *ngIf="model !== 'template'" [innerHTML]="text | safe: 'html'"></div>
      <div *ngIf="model === 'template'">
        <ng-template [ngTemplateOutlet]="contentTemplate" [ngTemplateOutletContext]="{ $implicit: this, data: data }"></ng-template>
      </div>
    </div>
  </div>
  <div
    class="devui-time-axis-item-axis"
    [class.devui-time-axis-item-axis-padding-horizontal]="direction === 'horizontal'"
    [class.devui-time-axis-item-axis-padding-vertical]="direction === 'vertical'"
    [class.devui-time-axis-item-axis-padding-mode-top]="mode === 'top'"
    [class.devui-time-axis-item-axis-padding-mode-bottom]="mode === 'bottom'"
    [class.devui-time-axis-item-axis-padding-mode-left]="mode === 'left'"
    [class.devui-time-axis-item-axis-padding-mode-right]="mode === 'right'"
  >
    <div
      *ngIf="!customDot && (_type === 'primary' || !_type)"
      [style.borderColor]="dotColor"
      class="devui-time-axis-item-dot devui-time-axis-item-type-{{ _type || 'primary' }} {{ iconClass }}"
    ></div>
    <div
      *ngIf="!customDot && _type !== 'primary' && _type"
      class="devui-time-axis-item-dot devui-time-axis-item-type-{{ _type || 'primary' }} {{ iconClass }}"
    >
      <svg
        *ngIf="_type === 'danger'"
        class="devui-icon devui-icon-error"
        width="16px"
        height="16px"
        viewBox="0 0 16 16"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <circle cx="8" cy="8" r="7"></circle>
          <path
            d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z"
            fill-rule="nonzero"
          ></path>
        </g>
      </svg>
      <i *ngIf="_type === 'right' || _type === 'warning'" class="devui-icon icon-{{ _type }}-o"></i>
      <span *ngIf="_type === 'running'">
        {{ dotText }}
      </span>
    </div>
    <div *ngIf="customDot" class="devui-time-axis-item-custom-dot">
      <ng-template [ngTemplateOutlet]="dotTemplate || defaultDotTemplate"> </ng-template>
      <ng-template #defaultDotTemplate>
        <span [innerHTML]="customDot | safe: 'html'"></span>
      </ng-template>
    </div>
    <div *ngIf="time && timePosition === 'bottom'">{{ time }}</div>
    <div class="{{ timeAxisLineClass }}" [style.borderColor]="lineStyle?.color">
      <div *ngIf="extraElement" class="devui-time-axis-middle-zone">
        <ng-template [ngTemplateOutlet]="extraTemplate || defaultTemplate"> </ng-template>
        <ng-template #defaultTemplate>
          <div [innerHTML]="extraElement | safe: 'html'"></div>
        </ng-template>
      </div>
    </div>
  </div>
  <div
    *ngIf="mode !== 'top' && mode !== 'left'"
    [class.devui-time-axis-item-data-horizontal-bottom]="direction === 'horizontal'"
    [class.devui-time-axis-item-data-vertical-right]="direction === 'vertical' && timePosition !== 'bottom'"
    [class.devui-time-axis-item-data-time-bottom]="timePosition === 'bottom'"
  >
    <div *ngIf="time && (position === 'top' || position === 'left')">
      <div [class.devui-time-axis-item-horizontal-align-center]="position === 'top' && horizontalAlign === 'center'">{{ time }}</div>
    </div>
    <div
      *ngIf="position === 'bottom' || position === 'right'"
      [class.devui-time-axis-item-horizontal-align-center]="position === 'bottom' && horizontalAlign === 'center'"
    >
      <div *ngIf="model !== 'template'" [innerHTML]="text | safe: 'html'"></div>
      <div *ngIf="model === 'template'">
        <ng-template [ngTemplateOutlet]="contentTemplate" [ngTemplateOutletContext]="{ $implicit: this, data: data }"></ng-template>
      </div>
    </div>
  </div>
</div>
